<div ng-controller="FoundController" class="main">
    <div class="nav">
        <div class="nav-titles">
            <div class="nav-left">
                <a href="" class="a-active" >每日精选</a>
                <a href="" ng-click="aaa">包包</a>
                <a href="">护肤</a>
                <a href="">鞋子</a>
                <a href="">配饰</a>
                <a href="">彩妆</a>
                <a href="">服装</a>
                <a href="">数码</a>
                <a href="">食品</a>
                <a href="">母婴</a>
                <a href="">美妆护肤</a>
                <a href="">服饰鞋包</a>
            </div>
            <div class="nav-right">
                <a href="">发布笔记</a>
                <a id="denglu" href="">登录</a>
            </div>
        </div>
    </div>
    <!--登录弹框-->
			<div class="denglu-page" style="display: none;">
            	<h1><img id="close-im" src="http://s4.xiaohongshu.com/static/img/v2/web/common/login/close.png"/></h1>
            	<div>
            		<a class="png_bg"></a>
            	</div>
            	<div class="png_titl"><span>登录</span></div>
            	<div class="png_img">
            		<a href=""></a>
            		<a href=""></a>
            	</div>
            </div>
    <div class="list-cont">
        <!--百度分享-->
        <div class="bdsharebuttonbox fenxiang">
            <div class="fenxiang-left">
                <a href="#"
                   style=" display: inline-block; width: 20px; height: 75px; margin: 63px 0 0 0; padding: 0;
                        background: url('http://v3.jiathis.com/code_mini/images/r.gif')
               ">
                </a>
            </div>
            <div class="fenxiang-right">
                <h3 style="font-size: 14px; margin: 0; padding: 6px 0 6px 10px; background-color: #F2F2F2;">分享到</h3>
                <div>
                    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">微博</a>
                </div>
                <div>
                    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
                </div>
                <div>
                    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
                </div>
                <div>
                    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
                </div>
                <div>
                    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网">豆瓣</a>
                </div>
                <p style="font-size: 14px; text-align: right; margin: 0; padding: 6px 10px; background-color: #F2F2F2;">
                    <img src="http://v3.jiathis.com/code_mini/images/img_012.gif" alt="" style="margin-bottom: 2px">
                    百度分享
                </p>
            </div>
        </div>
        <script>
            window._bd_share_config={
                "common":{
                    "bdSnsKey":{},
                    "bdText":"",
                    "bdMini":"2",
                    "bdPic":"",
                    "bdStyle":"0",
                    "bdSize":"16"
                },
                "share":{},
                "image":{
                    "viewList":["qzone","tsina","tqq","renren","weixin","douban"],
                    "viewText":"分享到：",
                    "viewSize":"16"
                },"selectShare":{
                    "bdContainerClass":null,
                    "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin","douban"]
                }
            };
            with(document)0[(getElementsByTagName('head')[0]||body)
                    .appendChild(createElement('script'))
                    .src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        </script>
        <ul class="list-view-ul">

        </ul>
        <ul class="list-view-ul">

        </ul>
        <ul class="list-view-ul">

        </ul>
        <ul class="list-view-ul">

        </ul>
        <div class="jiazaishibaitishi">已经到底了！！</div>
        <div class="zhengzaijiazai">
            <div class="xian" ></div>
            <div class="zhengzaijiazai-img">
                <img src="imgs/jiazai2.png" >
            </div>

        </div>
    </div>
</div>
<script id="faxianSpecifyTemp" type="text/html">
    <li class="shangping">
        <a class="tankuang" onclick="tanchuxiangqing()">
            <div class="">
                <img src="{{images}}" alt="" style="width: 273px">
            </div>
            <div class="spe-text">{{desc}}</div>
            <div class="spe-info" style="padding-bottom: 20px">
                <a href=""><img src="//s4.xiaohongshu.com/static/img/v2/web/common/comment.png" alt="">
                    <span>{{comments}}</span></a>
                <a href="" style="position: absolute;right: 50px"><img src="//s4.xiaohongshu.com/static/img/v2/web/common/unfollow.png" alt="">
                    <span>{{likes}}</span></a>
            </div>
        </a>
    </li>
</script>

<!--商品详情页面模板-->
<script id="commodityTemp" type="text/html">
	<!--点击商品弹出页面-->
    <div class="commodity" >
    	<div class="commodity-header">
    		<div style="display: inline-block;" class="fis-img">
    		<img src="{{user.image}}"/>
    		</div>
    		<h5>{{user.nickname}}</h5>
    		<div class="com-head-info">
    			<div class="left-fenxiang">于<span>{{time}}</span>分享</div>
    			<div class="right-pinglun">
    				<img src="http://www.xiaohongshu.com/static/img/v2/web/list/note/talk.png"/>
    				<span>{{comments}}</span>
    				<img style="margin-left: 20px;" src="http://www.xiaohongshu.com/static/img/v2/web/list/note/unfollow2.png"/>
    				<span>{{likes}}</span>
    			</div>
    		</div>
    	</div>
    	<div class="commodity-info">
    		<p>{{desc}}
    			<div style="margin-top: 19px;font-size: 13px;color: #b7b8ba;">
    				价格：<span>¥</span>
    				
    			</div>
    		</p>
    	</div>
    	<div class="commodity-img">
    		<div class="commodity-handle">
    			<a href="">举报</a>
    			<a href="">
    				<img src="//s4.xiaohongshu.com/static/img/v2/web/list/note/share.png?s=1471971752" alt="" />
    				分享
    			</a>
    		</div>
    	</div>
    		
    	<div>
    	<ul id="yh-pl">
    		
    	</ul>
    	</div>
    </div>
</script>

<script type="text/javascript">
$(document).ready(function(){
    var $fenlei = $(".nav-titles .nav-left a"); //商品分类的 a标签
    var $lie = $(".list-view-ul");  //  四列ul
    var $_height=$("div.list-cont");  //
    var $loadedTip = $(".zhengzaijiazai"); // 正在加载提示
    var $LoadFailedPrompt = $(".jiazaishibaitishi");  // 加载失败提示
    var rr = $(window).height();  //窗口高度
    var xx = false;  // xx 和 ii 一起来判断滚动条到达底部时执行追加数据，且只执行一次
    var ii = 0;
    var gao=0; //记录$("div.list-cont")的高度
    var dangqianA = 0;  //表示json文件名序号
    var x = 1;  //  表示json文件名序号
    var $elem;
    var ind=1;
    fenleicharu();
    $fenlei.on("click",function () {
        dangqianA = $fenlei.index($(this));
        x=1;
        $LoadFailedPrompt.css("display","none");  //点击另一个选项时 让加载失败提示隐藏
        $fenlei.eq(dangqianA).addClass('a-active').siblings().removeClass("a-active");
//        删除li项
        $(".shangping").remove();
        fenleicharu();
    });
    if(ll2 && !ll3 && !ll5) {
        $(window).on("scroll", function(){
            var gundongtiao = $("body").scrollTop();
            if(gundongtiao >= $_height.height()-rr+173){
                xx=true;
                ii=ii+1;
            }
            else {
                xx = false;
            }
            if(xx && ii==1){
                x += 1;
                $loadedTip.css("display","block"); 
                fenleicharu();
            }
        });
    }

//    添加json数据函数
    function fenleicharu() {
        $.ajax({
            url: "json/index"+(dangqianA+1)+"-"+x+".json",
            method: "get",
            dataType: "json",
            success:function (data) {
                $.each(data.array,function (i,value) {
                    var arrayLength = data.array.length;
                    if(i>=0 && i<= arrayLength/4-1) {
                        $(template("faxianSpecifyTemp", value)).appendTo(".list-view-ul:nth-of-type(1)");
                        $loadedTip.css("display","none");  
                    }
                    else if(i>= arrayLength/4 && i<= arrayLength/4*2-1) {
                        $(template("faxianSpecifyTemp", value)).appendTo(".list-view-ul:nth-of-type(2)");
                    }
                    else if(i>= arrayLength/4*2 && i<= arrayLength/4*3-1) {
                        $(template("faxianSpecifyTemp", value)).appendTo(".list-view-ul:nth-of-type(3)");
                    }
                    else if(i>= arrayLength/4*3 && i<= arrayLength-1) {
                        $(template("faxianSpecifyTemp", value)).appendTo(".list-view-ul:nth-of-type(4)");
                        gao = $_height.height();
                        ii=0;
                    }
                    
                  
					$(".tankuang").click(function(){
						var $inda=$(".tankuang").index(this)/2;
						if($inda==i){
							var $xiangqing=$(template("commodityTemp",value)).appendTo(".main");
							for(var j=0;j<value.images_list.length;j++){
								$elem=$('<img src="'+value.images_list[j].url+'"/>');
								$(".commodity-handle").before($elem);
							}
						}
						ind=$inda+1;
						    $.ajax({
						        url: 'json/评论json/content-'+ind+'.json',
						        method: "get",
						        dataType: "json",
						        success:function (data) {
						            $.each(data.comments,function (i,value) {
										if($inda==i){
											for(var j=0;j<data.comments.length;j++){	
											var $list=$('<li class="pl-text"><img src="'+data.comments[j].user.image+'"/><div class="user-name">'+data.comments[j].user.nickname+'<span>'+data.comments[j].time+'</span></div><p>'+data.comments[j].content+'</p></li>')
											$list.appendTo("#yh-pl");
											}
										}
									})
						            	 
						           }
						    })//评论的ajax
					})
                });
            },
            error:function ( jqXHR,textStatus,errorThrown) {
                if(textStatus == "error"){
                    $loadedTip.css("display","none");
                    $LoadFailedPrompt.css("display","block");
                }
            }
        });
			    
    }
    
    $(".fenxiang-left a").mouseenter(function () {
        $(".fenxiang").animate({right:0},500);
    });
    $(".fenxiang").mouseleave(function () {
        $(".fenxiang").animate({right:-110},500);
    });
});
  //点击商品弹出详情
	 function tanchuxiangqing(){
	    var $yinying=$( '<div id="yinying" style="position:fixed;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 108;display: block;"></div>');
	    	$yinying.appendTo("body").click(function(){
	    		$(".commodity").remove()
	    		$(this).remove()
	    	});
		}
	 
	//登录部分
	var $denglu=$(".denglu-page");
    var $yinying=$( '<div id="yinying" style="position:fixed;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 108;display: block;"></div>');
	$("#denglu").click(function(){
		$denglu.css("display","block");
    	$yinying.appendTo("body").click(function(){
    		$denglu.css("display","none");
    		$(this).remove()
    	});
	})
	 $("#close-im").on("click",function(){
        	$denglu.css("display","none");
    		$yinying.remove();
        })
    
</script>